<template>
  <div>
    <div class="mt-4">
      <el-input
        v-model="input3"
        placeholder="请输入内容"
        class="input-with-select"
        clearable
        @input="inp2"
      >
        <template #append>
          <el-button :icon="Search" @click="inp1()"/>
        </template>
      </el-input>
    </div>
    <!-- 订单列表 -->
    <el-table :data="orderslist.list" border style="width: 100%">
      <el-table-column type="index" label="#" width="50" />
      <el-table-column prop="order_number" label="订单编号" />
      <el-table-column prop="order_price" label="订单价格" />
      <el-table-column prop="order_pay" label="是否付款">
        <template v-slot="scope">
          <el-tag type="danger" v-if="scope.row.pay_status">未付款</el-tag>
          <el-tag type="success" v-else>已付款</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="is_send" label="是否发货" />
      <el-table-column prop="create_time" label="下单时间" />
      <el-table-column prop="" label="操作">
        <el-button
          type="primary"
          :icon="Edit"
          @click="dialogFormVisible = true"
        />
        <el-button type="success" :icon="Promotion" />
      </el-table-column>
    </el-table>
    <!-- 编辑对话框 -->
    <el-dialog v-model="dialogFormVisible" title="修改地址">
    <el-form :model="form">
      <el-form-item label="省市区/县" :label-width="formLabelWidth">
        <el-cascader v-model="value" :options="options" @change="handleChange" />
      </el-form-item>
      <el-form-item label="详细地址" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
    <!-- 分页器 -->
    <div class="demo-pagination-block">
      <el-config-provider :locale="zhCn">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[5, 10, 15, 20]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="orderslist.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-config-provider>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { ordersList,Getorders } from "../tools/ajax";
import { Search, Edit, Promotion } from "@element-plus/icons-vue";
import zhCn from "element-plus/lib/locale/lang/zh-cn"; // 中文语言插件
import cityData from '../components/citydata'
const options = cityData
const input3 = ref("");
const select = ref("");
const orderslist = reactive({});
const form = reactive({
  name:""
});
const dialogFormVisible = ref(false);

const currentPage4 = ref(1);
const pageSize4 = ref(10);

// 选择每页几个
const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
  ordersList({ pagenum: currentPage4._value, pagesize: pageSize4._value }).then(
    (res) => {
      console.log(res);
      // 时间戳转换为时间
      for (let i = 0; i < res.data.goods.length; i++) {
        const ti = new Date(res.data.goods[i].create_time).toLocaleString();
        res.data.goods[i].create_time = ti;
      }
      orderslist.list = res.data.goods;
    }
  );
};
// 选择第几页
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
  ordersList({ pagenum: currentPage4._value, pagesize: pageSize4._value }).then(
    (res) => {
      console.log(res);
      // 时间戳转换为时间
      for (let i = 0; i < res.data.goods.length; i++) {
        const ti = new Date(res.data.goods[i].create_time).toLocaleString();
        res.data.goods[i].create_time = ti;
      }
      orderslist.list = res.data.goods;
    }
  );
};

// 订单列表
function ordersLists() {
  ordersList({ pagenum: currentPage4._value, pagesize: pageSize4._value }).then((res) => {
    console.log(res);
    // 时间戳转换为时间
    for (let i = 0; i < res.data.goods.length; i++) {
      const ti = new Date(res.data.goods[i].create_time).toLocaleString();
      res.data.goods[i].create_time = ti;
    }
    orderslist.list = res.data.goods;
    orderslist.total = res.data.total;
  });
}
ordersLists();
// 搜索订单
function inp1(){
    Getorders({id:input3._rawValue*1}).then(res=>{
        console.log(res);
        let zslist =reactive([])
        zslist[0]=res.data
        orderslist.list=zslist
    })
}
// 输入框为空时重新调用
function inp2(){
    if (input3._rawValue=="") {
        ordersLists();
    }
}
</script>
<style scoped lang="less">
.mt-4 {
  width: 300px;
  display: flex;
  margin: 20px 10px;
}
</style>